<!--商品列表模块-->
<template>
    <scroll-view scroll-y="true" class="swiper-item-box">
        <view class="shop_item">
            <navigator class="list" wx:for="{{list}}" wx:key="item" url="/pages/commodity/commodityDetails?id={{item.id}}">
                <view class="image_box">
                    <image src="{{item.topicImage}}" mode="aspectFit"></image>
                </view>
                <view class="goods">
                    <view class="product_name">{{item.name}}</view>
                    <view class="product_info">
                        <view class="price">￥{{item.amount}}</view>
                        <view class="sale_num">{{item.sumPay}}人付款</view>
                    </view>
                </view>
            </navigator>
        </view>
    </scroll-view>
</template>
<script>
    import wepy from 'wepy'

    export default class shopGridList extends wepy.component {
      data = {
        list: []
      }
      events = {}
      methods = {
        eachItem(r) {
          const t = this
          if (r) {
            t.list = r
            t.$apply()
          }
        }
      }
    }
</script>
<style lang="less">
.shop_item {
    padding: 0rpx 15rpx;
    background: #fff;
    display: flex;
    flex-wrap: wrap;
    margin-top: 10rpx;
}
.list:nth-child(odd) {
    margin-right: 2%;
}

.list {
    background: #fff;
    width: 49%;
    height: 454rpx;
    margin-bottom: 16rpx;
    .image_box {
        image {
            width: 100%;
            height: 280rpx;
        }
    }
    .product_name {
        color: #1a1a1a;
        font-size: 28rpx;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        word-break: break-all;
    }
    .price {
        color: #333;
        font-size: 24rpx;
        font-weight: 600;
    }
    .cost_price {
        color: #666666;
        font-size: 24rpx;
        text-decoration: line-through;
        font-weight: 600;
    }
    .sale_num {
        color: #666666;
        font-size: 22rpx;
    }
    .goods {
        padding: 15rpx 12rpx;
    }
    .product_info {
        padding-top: 20rpx;
        display: block;
        align-items: flex-end;
        display: flex;
    }
    .cost_price {
        padding-left: 20rpx;
    }
    .sale_num {
        margin-left: auto;
        padding-left: 20rpx;
    }
}
</style>
